<template>
	<view class="u-waterfall">
		<view id="u-left-column" class="u-column u-left-column">
			<view v-for="(item, index) in leftList" :key="index" @click="echange(item)" class="goods-item">
				<view class="image">
					<image class="img" :src="item.cover_pic" :lazy-load="true"></image>
					<view class="no-goods" v-if="item.goods_stock == 0">
						<view class="no-title">
							已售
						</view>
					</view>
				</view>
				<view class="title u-line-2">
					{{item.name}}
				</view>
				<view class="price">
					定金 {{'￥' + item.price}}
				</view>
				<view class="subtitle">
					<image src="../../../../static/image/icon/form-er.png" mode="" v-if="!item.iselect"></image>
					<image src="../../../../static/image/icon/friend-v.png" mode="" v-if="item.iselect"></image>
				</view>
			</view>
		</view>
		<view id="u-right-column" class="u-column u-right-column">
			<view v-for="(item, index) in rightList" :key="index" @click="echange(item)" class="goods-item">
				<view class="image">
					<image class="img" :src="item.cover_pic" :lazy-load="true" mode="widthFix"></image>
					<view class="no-goods" v-if="item.goods_stock == 0">
						<view class="no-title">
							已售
						</view>
					</view>
				</view>
				<view class="title u-line-2">
					{{item.name}}
				</view>
				<view class="price">
					定金 {{'￥' + item.price}}
				</view>
				<view class="subtitle">
					<image src="../../../../static/image/icon/form-er.png" mode="" v-if="!item.iselect"></image>
					<image src="../../../../static/image/icon/friend-v.png" mode="" v-if="item.iselect"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";

	export default {
		name: "u-goods-ware",
		props: {
			value: {
				type: Array,
				required: true,
				default: function() {
					return [];
				}
			},
			addTime: {
				type: [Number, String],
				default: 200
			}
		},
		provide() {
			return {
				uWaterfall: this
			}
		},
		data() {
			return {
				leftList: [],
				rightList: [],
				tempList: [],
				children: [],
				attrShow: 0,
				goods: null
			}
		},
		watch: {
			copyFlowList(nVal, oVal) {
				// console.log(nVal,oVal);
				let startIndex = Array.isArray(oVal) && oVal.length > 0 ? oVal.length : 0;
				if(nVal.length == 0){
					this.emptyList()
				} else{
					this.tempList = this.tempList.concat(this.cloneData(nVal.slice(startIndex)));
				}
				
				this.splitData();
			}
		},
		mounted() {
			this.tempList = this.cloneData(this.copyFlowList);
			this.splitData();
		},
		computed: {
			copyFlowList() {
				return this.cloneData(this.value);
			}
		},
		methods: {
			async splitData() {
				// console.log(this.tempList.length);
				if (!this.tempList.length) return;
				// console.log(this.tempList.length,999);
				let leftRect = await this.uGetRect('#u-left-column');
				let rightRect = await this.uGetRect('#u-right-column');
				let item = this.tempList[0];
				if (!item) return;
				if (leftRect.height < rightRect.height) {
					this.leftList.push(item);
				} else if (leftRect.height > rightRect.height) {
					this.rightList.push(item);
				} else {
					if (this.leftList.length <= this.rightList.length) {
						this.leftList.push(item);
					} else {
						this.rightList.push(item);
					}
				}
				this.tempList.splice(0, 1);
				if (this.tempList.length) {
					setTimeout(() => {
						this.splitData();
					}, this.addTime);
				}
			},
			cloneData(data) {
				return JSON.parse(JSON.stringify(data));
			},

			uGetRect(element) {
				return new Promise((resolve) => {
					const query = uni.createSelectorQuery().in(this);
					query.select(element).boundingClientRect(data => {
						resolve(data);
					}).exec();
				})
			},
			echange(e){
				e.iselect = true
				// console.log(this.leftList);
				// console.log(this.tempList);
				// console.log(this.rightList);
				this.$emit('echange',e)
			},
			emptyList() {
				this.leftList = [];
				this.tempList = [];
				this.rightList = [];
			}
		},
	}
</script>

<style lang="scss" scoped>
	.u-waterfall {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-around;
	}

	.u-column {
		display: flex;
		flex: 1;
		flex-direction: column;
		height: auto;
	}

	.u-image {
		width: 100%;
	}

	.u-right-column {
		margin-right: 24upx;
		margin-left: 7upx;
	}

	.u-left-column {
		margin-left: 24upx;
		margin-right: 7upx;
	}

	.demo-image {
		width: 350rpx;
	}

	.goods-item {
		width: 350rpx;
		background-color: #fff;
		// margin-top: 20upx;
		margin: 20rpx 0;
		overflow: hidden;
		border-radius: 16upx;
		box-shadow: 0px 30rpx 60rpx rgba(57, 57, 57, 0.1);
	}

	.goods-title {
		/* font-size: 26upx;
		color: #373737; */
		padding: 0 20upx;
		font-size: 24rpx;
		line-height: 36rpx;
		font-weight: 700;
		color: rgba(0, 0, 0, 0.84);
	}

	.image {
		width: 100%;
		// height: 470rpx;
		height: 350rpx;
		position: relative;

		.img {
			width: 100%;
			height: 100%;
		}

		.no-goods {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.3);
			margin: 0 auto;

			.no-title {
				width: 124rpx;
				height: 124rpx;
				border-radius: 50%;
				background-color: rgba($color: #000000, $alpha: 0.5);
				backdrop-filter: blur(9px);
				font-size: 36rpx;
				text-align: center;
				line-height: 124rpx;
				color: #FFFFFF;
				font-weight: bold;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
			}
		}
	}

	.title {
		margin: 8rpx 14rpx 16rpx;
		font-size: 24rpx;
		font-weight: 700;
		line-height: 36rpx;
		color: rgba(0, 0, 0, 0.84);
	}

	.price {
		margin: 8rpx 14rpx;
		color: #FF5238;
		font-weight: 600;
		font-size: 28rpx;
		line-height: 40rpx;
	}

	.subtitle {
		margin: 8rpx 14rpx 24rpx;
		font-size: 24rpx;
		line-height: 36rpx;
		// color: rgba(93, 93, 93, 0.8);
		color: rgba(0, 0, 0, 0.8);
		font-weight: 600;
		image{
			width: 52rpx;
			height: 52rpx;
		}
	}

	.goods-content {
		padding: 0 20upx;
		margin: 12upx 0 28upx 0;
	}

	.describe {
		font-size: 24rpx;
		line-height: 36rpx;
		font-weight: 700;
		color: rgba(0, 0, 0, 0.84);
		// font-size: 22upx;
	}

	.content {
		/* font-size: 18upx;
		color: #b0b0b0; */
		color: rgba(0, 0, 0, 0.64);
		font-size: 20rpx;
		line-height: 36rpx;
		font-weight: 700;
	}
</style>
